<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>便便记录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="css/common.css">
    <style>
        .quick-record-btn {
            width: 100%;
            padding: 20px 0;
            border-radius: 8px;
            background: var(--weapp-card-bg);
            border: 1px solid var(--weapp-border);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: background-color 0.2s;
        }
        .quick-record-btn:active {
            background-color: #f5f5f5;
        }
        .quick-record-btn i {
            font-size: 24px;
        }
        .stat-card {
            background: var(--weapp-card-bg);
            border-radius: 8px;
            padding: 16px;
            text-align: center;
        }
        .stat-value {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .stat-label {
            font-size: 12px;
            color: var(--weapp-text-light);
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar"></div>

    <!-- 导航栏 -->
    <div class="weapp-nav">
        <span>便便记录</span>
    </div>

    <!-- 主要内容区 -->
    <div class="weapp-container">
        <!-- 快速记录 -->
        <div class="grid grid-cols-2 gap-4 mb-4">
            <button class="quick-record-btn">
                <i class="fas fa-poo text-yellow-500"></i>
                <span class="text-sm">正常</span>
            </button>
            <button class="quick-record-btn">
                <i class="fas fa-poo text-green-500"></i>
                <span class="text-sm">软便</span>
            </button>
            <button class="quick-record-btn">
                <i class="fas fa-poo text-red-500"></i>
                <span class="text-sm">硬便</span>
            </button>
            <button class="quick-record-btn">
                <i class="fas fa-plus text-gray-400"></i>
                <span class="text-sm">其他</span>
            </button>
        </div>

        <!-- 今日统计 -->
        <div class="mb-4">
            <h2 class="text-base font-medium mb-3 px-2">今日统计</h2>
            <div class="grid grid-cols-3 gap-3">
                <div class="stat-card">
                    <div class="stat-value text-yellow-500">2</div>
                    <div class="stat-label">次数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value text-green-500">正常</div>
                    <div class="stat-label">状态</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value text-blue-500">500ml</div>
                    <div class="stat-label">饮水量</div>
                </div>
            </div>
        </div>

        <!-- 最近记录 -->
        <div>
            <h2 class="text-base font-medium mb-3 px-2">最近记录</h2>
            <div class="weapp-list">
                <div class="weapp-list-item">
                    <div class="flex-1">
                        <div class="flex items-center">
                            <i class="fas fa-poo text-yellow-500 mr-2"></i>
                            <span>正常便便</span>
                        </div>
                        <div class="text-xs text-gray-400 mt-1">
                            今天 10:30
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-300"></i>
                </div>
                <div class="weapp-list-item">
                    <div class="flex-1">
                        <div class="flex items-center">
                            <i class="fas fa-poo text-green-500 mr-2"></i>
                            <span>软便</span>
                        </div>
                        <div class="text-xs text-gray-400 mt-1">
                            今天 08:15
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-300"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="weapp-tabbar">
        <div class="weapp-tabbar-item active">
            <i class="fas fa-home weapp-tabbar-icon"></i>
            <span>记录</span>
        </div>
        <div class="weapp-tabbar-item">
            <i class="fas fa-calendar-alt weapp-tabbar-icon"></i>
            <span>历史</span>
        </div>
        <div class="weapp-tabbar-item">
            <i class="fas fa-chart-bar weapp-tabbar-icon"></i>
            <span>统计</span>
        </div>
        <div class="weapp-tabbar-item">
            <i class="fas fa-user weapp-tabbar-icon"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 